<div class="row" ng-controller="SeedModules.Admin/modules/admin/controllers/roles">
    <div class="col-md-3">
        <div class="panel panel-default" ng-init="vm.loadRoles()">
            <div class="panel-heading">
                <strong>角色列表</strong>
            </div>
            <div class="list-group">
                <a href="" class="list-group-item" ng-class="{'active': currentRole&&currentRole.id===role.id}" ng-click="vm.selectRole(role)"
                    ng-repeat="role in roles">
                    <span ng-bind="role.rolename" ng-if="!role.displayName||role.displayName===''"></span>
                    <span ng-bind="role.displayName" ng-if="role.displayName&&role.displayName!==''"></span>
                </a>
                <a href="" class="list-group-item text-center" ng-click="create()">
                    <i class="glyphicon glyphicon-plus"></i>
                    新建
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-9" ng-show="currentRole===null">
        <div class="well well-lg text-center">
            <h3>请选择角色</h3>
        </div>
    </div>
    <div class="col-md-9" ng-show="currentRole!==null">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                    <i class="glyphicon glyphicon-user"></i>
                    成员
                </a>
            </li>
            <li role="presentation">
                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                    <i class="glyphicon glyphicon-lock"></i>
                    权限
                </a>
            </li>
            <li>
                <a href="" ng-click="setName(currentRole)">
                    <i class="glyphicon glyphicon-pencil"></i>
                    别名
                </a>
            </li>
            <li class="pull-right">
                <button class="btn btn-default" aria-controls="profile" ng-click="cancelEditing()">
                    <i class="glyphicon glyphicon-remove"></i>
                    取消
                </button>
            </li>
            <li class="pull-right" style="margin-right: 5px">
                <button class="btn btn-danger" aria-controls="profile" ng-click="drop()">
                    <i class="glyphicon glyphicon-trash"></i>
                    删除
                </button>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="navbar navbar-default navbar-static-top">
                    <div class="navbar-header">
                        <div class="navbar-form">
                            <button class="btn btn-danger" ng-click="removeMember()">
                                <i class="glyphicon glyphicon-minus"></i>
                                移除选中
                            </button>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="navbar-form navbar-right">
                            <button class="btn btn-success" ng-click="addMember()">
                                <i class="glyphicon glyphicon-plus"></i>
                                添加
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <table ng-table="tableParams" class="table table-striped table-hover" template-pagination="/SeedModules.AngularUI/modules/templates/tablePagination.html">
                        <colgroup>
                            <col width="45px" />
                        </colgroup>
                        <tr ng-repeat="row in $data">
                            <td header="'table-checkbox.html'">
                                <input type="checkbox" ng-model="checked[row.id]" ng-change="vm.onCheck()">
                            </td>
                            <td title="'用户名'">{{row.username}}</td>
                            <td title="'姓名'">{{row.lastName}}&nbsp;{{row.firstName}}</td>
                            <td title="'邮箱'">{{row.email}}</td>
                            <td title="'操作'">
                                <a href="" class="text-danger" ng-click="removeMember(row)">移除</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="navbar navbar-default navbar-static-top">
                    <div class="navbar-header">
                        <!-- <div class="navbar-form">
                            <button class="btn btn-default">全选</button>
                        </div> -->
                    </div>
                    <div class="container-fluid">
                        <div class="navbar-form navbar-right">
                            <button class="btn btn-primary" ng-click="vm.saveRolePermission()">
                                <i class="glyphicon glyphicon-floppy-disk"></i>
                                保存
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <table ng-table class="table table-striped table-bordered">
                        <tr ng-repeat="(key, val) in permissions">
                            <td title="'功能'">
                                <div class="form-group col-md-12">
                                    <label>
                                        <input type="checkbox" ng-click="vm.changeAllPermission(key)" ng-checked="vm.isAllPermission(key)"> {{key}}
                                    </label>
                                </div>
                            </td>
                            <td title="'权限'">
                                <div class="form-group col-md-3" ng-repeat="per in val">
                                    <label>
                                        <input type="checkbox" ng-click="vm.permissionChanged(per)" ng-checked="vm.hasPermission(per)"> {{per.description}}
                                    </label>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="table-checkbox.html">
    <input type="checkbox" ng-model="checkedAll" ng-click="vm.checkAll()">
</script>